<template>
  <div class="report-period-search">

    <el-form :inline="true" ref="queryForm" :model="searchForm" class="demo-form-inline">
      <el-form-item prop="periodTypeCode">
        <el-select placeholder="表期类型" size="small" style="width: 120px" v-model="searchForm.periodTypeCode" @change="onPeriodChange">
          <el-option
            v-for="item in periodList"
            :key="item.periodTypeCode"
            :label="item.periodTypeName"
            :value="item.periodTypeCode">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="periodYear">
        <el-select class="period-year" placeholder="年份" style="width: 100px" size="small"
                   @change="onPeriodYearChange" v-model="searchForm.periodYear">
          <el-option
            v-for="item in periodYearList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="periodMonth" v-if="showPeriodMonth">
        <el-select class="period-year" placeholder="月份" style="width: 100px" size="small"
                   @change="onPeriodMonthChange" v-model="searchForm.periodMonth">
          <el-option
            v-for="item in periodMonthList"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="periodCode">
        <el-select class="period-info" placeholder="表期" size="small"
                   @change="onPeriodCodeChange"
                   v-model="searchForm.periodCode">
          <el-option
            v-for="item in periodInfoList"
            :key="item.periodCode"
            :label="item.periodName"
            :value="item.periodCode">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import { queryPeriodList, queryPeriodYear, getPeriodInfoByType } from "@/api/common/commonData";

export default {
  name: "kld-period-search",
  data() {
    return {
      periodList: [],
      periodYearList: [],
      periodMonthList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      periodInfoList: [],
      searchForm: {
        periodTypeCode: '',
        periodYear: '',
        periodMonth: '',
        periodCode: '',
      },
      //是否显示月份
      showPeriodMonth: false,
    }
  },
  watch: {
    'searchForm.periodTypeCode': function(val) {
      //日报
      if(val==='010101') {
        this.showPeriodMonth = true;
        this.searchForm.periodMonth = this.periodMonthList[0];
      }else {
        this.showPeriodMonth = false;
        this.searchForm.periodMonth = '';
      }
    }
  },
  created() {
    this.getPeriodList();
  },
  methods: {
    getPeriodList() {
      queryPeriodList().then(response => {
        this.periodList = response.data;
        this.searchForm.periodTypeCode = this.periodList[1].periodTypeCode;
        this.onPeriodChange(this.searchForm.periodTypeCode);
      })
    },
    onPeriodChange(obj) {
      // queryPeriodYear().then(response => {
      //
      // })
      this.periodYearList = ['2022', '2021', '2020', '2019'];
      this.searchForm.periodCode = '';
      this.searchForm.periodYear = this.periodYearList[0];
      // 日报
      if(obj==='010101') {
        this.searchForm.periodMonth = this.periodMonthList[0];
      }
      this.getPeriodInfoByType();
    },
    onPeriodYearChange() {
      this.searchForm.periodCode = '';
      this.getPeriodInfoByType();
    },
    onPeriodMonthChange() {
      this.getPeriodInfoByType();
    },
    onPeriodCodeChange() {
      this.$emit('getPeriodSearch', this.searchForm)
    },
    getPeriodInfoByType() {
      let params = {
        periodTypeCode: this.searchForm.periodTypeCode,  // 表期类型
        year: this.searchForm.periodYear, // 年份
        month: this.searchForm.periodTypeCode==='010101'?parseInt(this.searchForm.periodMonth)+'':'', // 月份
      }
      getPeriodInfoByType(params).then(response => {
        this.periodInfoList = response;
        let currentFlag = false;
        response.forEach(item => {
          // 当前期
          if(item.isCurrentPeriod === 1) {
            currentFlag = true;
            this.searchForm.periodCode = item.periodCode;
          }
        })
        // 没有当前期时，取第一个表期
        if(!currentFlag) {
          this.searchForm.periodCode = this.periodInfoList[0].periodCode;
        }
        this.$emit('getPeriodSearch', this.searchForm)
      })
    }
  }
}
</script>

<style lang="scss">
  .report-period-search .el-form-item {
  margin-bottom: 8px;
  &:last-child {
    margin-right: 0;
  }

}
</style>
